<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自然风景</title>
    <style>
        body { font-family: Arial; margin: 20px; background: #f5f9ff; }
        h1 { text-align: center; color: #2c5530; }
        .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 20px; }
        .card { background: white; padding: 10px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .card img { width: 100%; height: 150px; object-fit: cover; border-radius: 5px; }
        .title { font-weight: bold; margin: 10px 0 5px; color: #2c5530; }
    </style>
</head>
<body>
    <h1>自然风景欣赏</h1>
    <div class="gallery">
        <div class="card">
            <div class="title">壮丽山脉</div>
            <div>巍峨山峰，云雾缭绕</div>
        </div>
        <div class="card">
            <div class="title">宁静湖泊</div>
            <div>清澈湖水，倒映天空</div>
        </div>
        <div class="card">
            <div class="title">神秘森林</div>
            <div>茂密树林，生机勃勃</div>
        </div>
    </div>
</body>
</html>